<template>
  <div class="container">
    <div class="title">
      <h2>通知公告</h2>
      <h5>用于管理各小区的通知公告、公共的通告公告</h5>
    </div>
    <!-- 标题 -->
    <el-card class="box-card">
      <el-form class="demo-form-inline">
        <el-form-item label="小区名称">
          <el-select v-model="queryData.community_code" placeholder="请输入">
            <el-option v-for="item in zzw" :key="item.id" :label="item.name" :value="item.code" />
          </el-select>
        </el-form-item>
        <el-form-item label="标题">
          <el-input v-model="queryData.title" placeholder="请输入" />
        </el-form-item>

        <el-form-item label="类型">
          <el-select v-model="queryData.type" placeholder="请选择">
            <el-option v-for="(item,index) in zfzf" :key="index" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="queryData.status" placeholder="请选择">
            <el-option v-for="(item,index) in option" :key="index" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

        <el-form-item class="btn">
          <el-button style="float: right; padding: 10px 20px;" type="primary" @click="onSubmit">查询</el-button>
          <el-button style="float: right; padding: 10px 20px;margin-right:10px" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>

    </el-card>
    <!-- 表格 -->
    <el-card class="tableCard">
      <el-button style="float: right; padding: 10px 20px;margin-right:80px" type="primary" size="small" @click="drawer=true">新增通知公告</el-button>
      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          prop="id"
          label="ID"
          width="180"
        />
        <el-table-column
          prop="community.name"
          label="小区名称"
          width="180"
        />
        <el-table-column
          prop="title"
          label="标题"
        />
        <el-table-column
          prop="pic_url"
          label="封面图"
        >
          <template slot-scope="{row}">
            <div class="iamge">
              <img
                :src="getPhoto(row.pic_url)[0]"
                style="heigth:100px;width:100px"
                @click="previewImg(getPhoto(row.pic_url))"
              >
            </div>
          </template>
        </el-table-column>

        <el-table-column
          prop="type"
          label="类型"
        >
          <template slot-scope="{row}">
            <span>{{ row.type=== 1 ?'通知': '公告' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
        >
          <template slot-scope="{row}">
            <span>{{ row.status=== 0 ?'关闭': '启用' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="sort"
          label="权重"
        />
        <el-table-column
          fixed="right"
          label="操作"
          width="100"
        >
          <template slot-scope="{row}">
            <el-button :disabled="!checkBtnPermission('/content/notice', 'update')" type="text" size="small" @click="handleClick(row.id)">编辑</el-button>
            <el-button :disabled="!checkBtnPermission('/content/notice', 'destroy')" type="text" size="small" @click="delfn(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" align="middle" style="float:right;padding: 10px 0 40px 0">
        <span>第 {{ startCount }}-{{ endCount }} 条/总共 {{ count }} 条</span>
        <el-pagination
          :current-page.sync="queryData.current"
          :page-size="queryData.pageSize"
          layout="prev, pager, next"
          :total="count"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </el-card>
    <advForm ref="advform" :drawer="drawer" :seeimage1="seeImage" @clearImgList="clearImgList" @updateList="initData" />
  </div>

</template>

<script>
// import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
import { getContentNoticeListApi, getNoticeListApi, delContentNoticeListApi, getNoticeIdApi } from '@/api/content_notice'
import advForm from './components/noticeForm.vue'
// import { ElImage } from 'element-ui/types/image'
export default {
  name: 'VueAdminTemplateMasterProject',
  components: {
    advForm
    // 'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer')
  },
  data() {
    return {
      drawer: false,
      // centerDialogVisible: false,
      // 下拉框小区名称数据
      zzw: [],
      // 时间数据
      time: '', // 临时存储时间
      // 列表数据
      tableData: [],
      queryData: {
        community_code: '',
        pic_url: '',
        status: '',
        type: '',
        title: '',
        current: 1,
        pageSize: 10
      },
      option: [
        { label: '关闭', value: 0 },
        { label: '启用', value: 1 }
      ],
      zfzf: [
        { label: '公告', value: 2 },
        { label: '通知', value: 1 }
      ],
      imges: require('@/assets/images/isno.png'),
      count: 0,
      seeImage: []

    }
  },
  computed: {
    startCount() {
      if (this.tableData.length) {
        return this.queryData.current === 1 ? this.queryData.current : (this.queryData.current - 1) * this.queryData.pageSize + 1
      }
      return 0
    },
    endCount() {
      if (this.tableData.length) {
        return this.queryData.current === 1 ? this.tableData.length : (this.queryData.current - 1) * this.queryData.pageSize + this.tableData.length
      }
      return 0
    }
  },

  mounted() {

  },
  created() {
    this.initData()
  },
  methods: {
    clearImgList() {
      this.seeImage = []
      this.drawer = false
    },
    // istu(url) {
    //   const qqq = String(url).split(',')
    //   const eee = qqq.map(item => 'http://124.223.14.236:8881' + item)
    //   return 	 eee
    // },
    async initData() {
      const res = await getContentNoticeListApi(this.queryData)
      console.log('res:', res)
      this.tableData = res.data.data.rows
      console.log('this.tableData:', this.tableData)
      const res1 = await getNoticeListApi()
      this.zzw = res1.data.data
      this.count = res.data.data.count
      console.log(this.zzw)
    },
    handleCurrentChange(newPage) {
      this.formInline.current = newPage
      this.initData()
    },
    // 搜索重置
    onReset() {
      // 重置搜索表单
      this.queryData = {
        content: '',
        update_time: '',
        title: '',
        status: '',
        pic_url: '',
        cate_id: '',
        create_time: '',
        current: 1,
        pageSize: 10
      }
      // 拉取列表
      this.initData()
    },
    // 搜索提交
    onSubmit() {
      // 页码变成1
      this.queryData.current = 1
      // 拉取列表
      this.initData()
    },
    // 删除
    async delfn(id) {
      // 弹出确认框
      await this.$confirm('确认删除吗')
      // 调用删除接口
      await delContentNoticeListApi(id)
      // 提示成功
      this.$message.success('删除成功')

      if (this.queryData.current > 1 && this.tableData.length === 1) {
        this.queryData.current--
      }
      this.initData()
    },
    // 编辑
    async  handleClick(id) {
      const res = await getNoticeIdApi(id)
      // const zifuchuan = res.status + ''
      // console.log('zifuchuan:', zifuchuan)
      // this.$refs.advform.formData.status = zifuchuan
      this.$refs.advform.formData = res.data.data
      const val = (this.$refs.advform.formData.pic_url || '').split(',')
      this.$refs.advform.imgList = val
      val.forEach(item => {
        this.seeImage.push({ url: 'http://124.223.14.236:8881' + item })
      })

      this.drawer = true
    },
    // 图片预览
    previewImg(url) {
      // 单图预览
      if (url.length === 1) {
        this.$hevueImgPreview({
          url: url[0]
        })
      } else {
        // # 多图预览
        this.$hevueImgPreview({
          multiple: true, // 开启多图预览模式
          nowImgIndex: 0, // 多图预览，默认展示第二张图片
          imgList: url // 需要预览的多图数组
        })
      }
    },
    // 图片格式化
    getPhoto(val) {
      const imgAll = []
      if (val) {
        // 多图
        if (val.includes(',')) {
          return val
            .split(',')
            .map((item) => 'http://124.223.14.236:8881' + item)
        } else {
          // 单图
          imgAll.push('http://124.223.14.236:8881' + val)
          return imgAll
        }
      } else {
        // 无图
        imgAll.push(this.imges)
        return imgAll
      }
    }

    // handleCurrentChange(val) {
    //   this.queryData.current = val
    //   this.initData()
    // },
    // // 点击切换数量
    // handleSizeChange(val) {
    //   this.queryData.pageSize = val
    //   this.initData()
    // }
  }
}
</script>

<style lang="scss" scoped>
.container{
  padding:40px;
  .title{
  display: flex;
  align-items: center;
  h2{
    margin-right:20px;
  }
  h5{
    font-weight: 400;
    color:#9c9c9d;
    vertical-align: middle;
  }
}
.demo-form-inline{
  display: flex;
}

.el-form-item{
  margin-right:73px;

}
.btn{
  padding-top:40px;
}
.box-card{
  margin-bottom:10px;

}

}

</style>
